<template>
	<div class="page pageBackground">
		<custom-box back title="最新动态">
			<div class="news">
				<div class="scroll">
					<div class="news-item flex a-center" v-for="item in newsList" @click="handleJump(item.content)">
						<div class="avatar"><img :src="item.main_pic"></div>
						<div class="info">
							<h4>{{ item.title }}</h4>
							<p class="zhenwen">{{ item.content }}</p>
						</div>
						<div class="submit">
							点击查看
						</div> 
					</div>
				</div>
			</div>
		</custom-box>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
	data(){
		return {
			newsList: [],
			static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			glbId: getApp().globalData.glb_list.glbId, // 获取全局的id
		}
	},
	mounted() {
		this._getNew(getApp().globalData.glb_list.newList)
	},
	methods: {
		...mapMutations([
      'getContent', // 拿到学号
    ]),
		handleJump(param) {
			this.getContent(param)
			this.$enter('/News/detail')
		},
		_getNew(list) {
			this.newsList = list.map(i => ({...i, main_pic: `${this.static_uri}${i.main_pic}`})).filter(i => i.sid === this.glbId);

			console.log('--', this.newsList)
		}
	}
}
</script>
<style scoped>
	.news{width: 100%; height: 100%; padding: .2rem .3rem;}
	.news-item{padding: .2rem 0; border-bottom:1px solid #E5EBF1;}
	.avatar{width:1.28rem; height: 1.28rem; border-radius: 10px; overflow: hidden; margin-right: 0.3rem;}
	.avatar img{width: 100%; height: 100%; object-fit: cover;}
	.news-item .info{flex:1; font-size: .24rem; color: #999;}
	.news-item .info h4{font-size: .3rem; color: #353535; margin-bottom: .2rem;}

	.zhenwen {
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.submit{
		width: 1.52rem;
		line-height: .48rem;
		background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		border-radius: .30rem;
		color:#fff;
		font-size: .24rem;
		text-align: center;
	}
</style>